<script lang="ts" setup>
import { Menu as MenuIcon } from 'lucide-vue-next';
import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
import LogoTitle from '~/components/LogoTitle.vue';
import type { TopNavGroup } from '~/types';
import { useUserStore } from '~/composables/store/user-store';
import FloatUserInfoCard from '~/components/FloatUserInfoCard.vue';

const topNavGroups: TopNavGroup[] = [
	{
		title: '编程分类板块',
		items: [{
			title: '代码学习',
			href: '/category/1',
			description: 'Study code',
		},
		{
			title: '学习笔记',
			href: '/category/2',
			description: 'Study notes',
		},
		{
			title: '前端开发',
			href: '/category/5',
			description: 'Front-end development',
		},
		{
			title: '后端开发',
			href: '/category/6',
			description: 'Back-end development',
		},
		{
			title: '硬件开发',
			href: '/category/7',
			description: 'Hardware development',
		},
		{
			title: '游戏开发',
			href: '/category/8',
			description: 'Game development',
		}],
	},
].slice(0, 2);

const { y } = useWindowScroll();
const isShowNavShadow = ref(false);

const focused = ref(false);
const isShowCenterTitle = ref(true);

const changeFocused = (isFocused: boolean) => {
	if (window.innerWidth < 640) {
		isShowCenterTitle.value = !isFocused;
	}
	if (isFocused) {
		focused.value = true;
	}
};

const userStore = useUserStore();
// const isLogin = ;

onMounted(() => {
	changeFocused(focused.value);
	isShowNavShadow.value = y.value > 0;
});

watch(y, (scrollY) => {
	isShowNavShadow.value = scrollY > 0;
});

watch(focused, (isFocused) => {
	changeFocused(isFocused);
});
</script>

<template>
	<div
		:class="isShowNavShadow?'shadow':''"
		class="sticky top-0 z-50 bg-white py-6 lg:py-10 transition-shadow"
	>
		<!--    LG--2XL -->
		<div class="container hidden lg:flex justify-between items-center h-[2.25rem]">
			<LogoTitle class="h-full" />
			<NavigationMenu>
				<NavigationMenuList>
					<NavigationMenuItem>
						<NavigationMenuLink
							:class="navigationMenuTriggerStyle()"
							href="/"
						>
							博客主页
						</NavigationMenuLink>
					</NavigationMenuItem>
					<NavigationMenuItem
						v-for="navList in topNavGroups"
						:key="navList.title"
					>
						<NavigationMenuTrigger>{{ navList.title }}</NavigationMenuTrigger>
						<NavigationMenuContent>
							<ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
								<NavigationMenuListItem
									v-for="nav in navList.items"
									:key="nav.title"
									:href="nav.href"
									:title="nav.title"
								>
									{{ nav.description }}
								</NavigationMenuListItem>
							</ul>
						</NavigationMenuContent>
					</NavigationMenuItem>
					<NavigationMenuItem>
						<NavigationMenuTrigger>关于我们</NavigationMenuTrigger>
						<NavigationMenuContent>
							<ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
								<li class="row-span-2">
									<NavigationMenuLink
										as-child
									>
										<a
											class="bg-offical bg-no-repeat bg-cover flex h-full w-full select-none flex-col justify-end rounded-md p-6 no-underline outline-none hover:shadow-md focus:shadow-md"
											href="/official/index.html"
											target="_blank"
										/>
									</NavigationMenuLink>
								</li>
								<NavigationMenuListItem
									href="https://gitee.com/joy-valley/joy-valley-web"
									title="Git仓库"
								>
									Gitee
								</NavigationMenuListItem>
								<NavigationMenuListItem
									href="/"
									title="视频介绍"
								>
									Bilibili
								</NavigationMenuListItem>
							</ul>
						</NavigationMenuContent>
					</NavigationMenuItem>
				</NavigationMenuList>
			</NavigationMenu>
			<div class="flex gap-3">
				<SearchInput :collapsed="false" />
				<!--   如果登录展示用户信息    -->
				<FloatUserInfoCard v-if="userStore.isLogin" />
				<!--   否则展示一个登录按钮   -->
				<NuxtLink
					v-else
					to="/login"
				>
					<Button>
						登录
					</Button>
				</NuxtLink>
			</div>
		</div>
		<!--    XS--MD -->
		<div class="container relative flex lg:hidden justify-between items-center h-[2.25rem]">
			<Sheet>
				<SheetTrigger as-child>
					<MenuIcon />
				</SheetTrigger>
				<SheetContent
					class="overflow-y-auto"
					side="left"
				>
					<nav class="grid gap-6 text-lg font-medium">
						<span class="sr-only">侧边导航</span>
						<!--   如果登录展示用户信息    -->
						<div
							v-if="userStore.isLogin"
							class="flex flex-col"
						>
							<div class="flex mb-4 mx-4">
								<Avatar
									size="base"
									class="mr-4"
								>
									<AvatarImage
										:src="userStore.user?.userInfo?.avatar||''"
										alt="Avatar"
									/>
								</Avatar>
								<div class="flex flex-col">
									<div class="text-2xl line-clamp-1">
										{{ userStore.user?.userInfo?.nickName }}
									</div>
									<div class="text-base line-clamp-1">
										{{ userStore.user?.userInfo?.username }}
									</div>
								</div>
							</div>
							<Button
								class="mt-2"
								@click="userStore.logout"
							>
								退出登录
							</Button>
						</div>
						<!--   否则展示一个登录按钮   -->
						<NuxtLink
							v-else
							class="flex flex-col items-center"
							to="/login"
						>
							<Button>
								登录
							</Button>
						</NuxtLink>
						<template
							v-for="navList in topNavGroups"
							:key="navList.title"
						>
							{{ navList.title }}
							<a
								v-for="nav in navList.items"
								:key="nav.title"
								:href="nav.href"
								:title="nav.title"
								class="text-muted-foreground hover:text-foreground"
							>
								{{ nav.title }}
							</a>
							<hr class="border-t">
						</template>
					</nav>
				</SheetContent>
			</Sheet>
			<LogoTitle
				v-show="isShowCenterTitle"
				class="h-full absolute left-[50%] translate-x-[-50%]"
			/>
			<SearchInput
				v-model:focused="focused"
				:collapsed="true"
			/>
		</div>
	</div>
</template>

<style lang="postcss" scoped>
.bg-offical {
  background-image: url('@/assets/image/official.webp');
}
</style>
